<template>
  <div>
    <q-select :options="['listView', 'chartView']" v-model="curTab"></q-select>
    {{ pagination }}fffff
    <q-tabs v-model="gdPropsValue" align="left" active-color="primary">
      <q-tab class="q-pa-none q-mx-md" name="gdProps" label="使用gdProps" />
      <q-tab class="q-pa-none q-mx-md" name="pingpuProps" label="平铺" />
    </q-tabs>
    <q-tab-panels v-model="gdPropsValue">
      <q-tab-panel name="gdProps" class="q-pa-none">
        <t-mixed-view
          ref="instance1"
          v-model:bbb="bbb"
          v-model:curTab="curTab"
          :gdProps="gdProps"
        ></t-mixed-view>
      </q-tab-panel>
      <q-tab-panel name="pingpuProps" class="q-pa-none">
        <t-mixed-view
          ref="instance1"
          v-model:bbb="bbb"
          v-model:curTab="curTab"
          --dataGrid-props
          :rows="rows"
          :showStriped="true"
          v-model:columnsFilter="columnsFilter"
          :enableCmdCol="enableCmdCol"
          :showRowNumber="showRowNumber"
          :allowSort="allowSort"
          :optColumns="optColumns"
          :row-key="rowKey"
          :allowColumnResizing="true"
          :loading="loading"
          height="fill"
          v-model:pagination="pagination"
          @request="onRequest"
          :optCmdColConfig="optCmdColConfig"
          :cmdColClick="cmdColClick"
          :colCommandVisible="colCommandVisible"
          :colDataFormat="colDataFormat"
          :gdProps="gdProps"
        ></t-mixed-view>
      </q-tab-panel>
    </q-tab-panels>

    <t-btn @click="onClick">chartView</t-btn>
  </div>
</template>
<script>
  import options from './options';

  import { onMounted, ref } from 'vue';
  export default {
    setup() {
      const rows = ref([]);

      const pagination = ref({
        // sortBy: 'desc',
        // descending: false,
        page: 1,
        rowsPerPage: 3,
        rowsNumber: 2001,
      });

      const loading = ref(false);

      function onRequest(props) {
        debugger;
        const { page, rowsPerPage, sortBy, descending } = props.pagination;
        const filter = props.filter;

        loading.value = true;

        setTimeout(() => {
          fetchFromServer(props.pagination, props.filter);
        }, 1500);
      }

      function fetchFromServer(_pagination, filter) {
        debugger;
        const { page, rowsPerPage, sortBy, descending, rowsNumber } =
          _pagination;
        const fetchCount = rowsPerPage === 0 ? rowsNumber : rowsPerPage;

        // calculate starting row of data
        const startRow = (page - 1) * rowsPerPage;

        fetch(
          `http://localhost:3004/users?_start=${startRow}&_limit=${fetchCount}`,
        ).then(response => {
          response.json().then(movies => {
            // rows.value = movies;
            // clear out existing data and add new
            rows.value.splice(0, rows.value.length, ...movies);

            // don't forget to update local pagination object
            pagination.value.rowsNumber = 2001;
            pagination.value.page = page;
            pagination.value.rowsPerPage = rowsPerPage;
            pagination.value.sortBy = sortBy;
            pagination.value.descending = descending;

            loading.value = false;
          });
        });
      }

      let Widget = {};
      onMounted(() => {
        Widget.instance1 = vm.instance1.value;
        Widget.dataGrid1 = vm.dataGrid1.value;
        fetchFromServer(pagination.value, '');
      });
      const curTab = ref('chartView');
      const bbb = ref('aaaa');

      const gdProps = {
        enableCmdCol: ref(options.enableCmdCol),
        showRowNumber: ref(false),
        allowSort: ref(true),
        optCmdColConfig: options.cmdColConfig,
        cmdColClick: cmdCol => {
          debugger;
          console.log(cmdCol, Widget.dataGrid1.colCmdInfo.data);
          return new Function('Widget', 'return (' + cmdCol.clientScript + ')')(
            Widget,
          );
        },
        colCommandVisible: cmdCol => {
          debugger;
          console.log(cmdCol, Widget.dataGrid1.colCmdInfo.data);
          if (cmdCol.exprVisible) {
            return new Function(
              'Widget',
              'return (' + cmdCol.exprVisible + ')',
            )(Widget);
          }
          return true;
        },
        colDataFormat: (col, dataFormat, val, row) => {
          let returnValue = val + '__AAAA';
          switch (dataFormat.FormatType) {
            case 'Discount':
              returnValue = val;
              if (window.Funcs && Funcs.getDetailDiscountRate) {
                let fixedRule = dataFormat.DiscountFixedRule || 1;
                let dr = Funcs.getDetailDiscountRate(returnValue, fixedRule);
                if (dr) {
                  returnValue = `${dr.prefix}${dr.value}${dr.suffix}`;
                }
              } else {
                returnValue = val + '(by colDataFormat)';
              }
              break;

            default:
              break;
          }

          debugger;
          return returnValue;
        },
        pagination: pagination,
        rowKey: options.idField,
        optColumns: options.columns,
        rows,
        loading,
        onRequest,
      };

      const dgVM = {
        dataGrid1: ref(),
        ffff() {
          debugger;
          Widget.dataGrid1.showRowNumber = !Widget.dataGrid1.showRowNumber;
        },
        selectOpts: ['none', 'multiple', 'single'],
      };

      const mvVM = {
        instance1: ref(),
        curTab,
        bbb,
      };

      let vm = {
        gdPropsValue: ref('gdProps'),
        ...mvVM,

        ...dgVM,
        // ...gdProps,
        gdProps: gdProps,
        onClick2() {
          debugger;
          curTab.value = curTab.value == 'chartView' ? 'listView' : 'chartView';
        },
        onClick() {
          debugger;
          Widget.instance1.curTab =
            Widget.instance1.curTab == 'chartView' ? 'listView' : 'chartView';
        },
      };
      return vm;
    },
  };
</script>
